<template>
  <div class="ds-body overflow-y-auto absolute top-24 bottom-12 left-0 right-0">
    <ds-grid-layout :layouts="layout">
      <template v-for="chart in charts" v-slot:[chart.slot]>
        <ds-title v-if="chart.type === 'Title'" :name="chart.name" :alias="chart.alias"/>
        <ds-grace-cell v-if="chart.type === 'Count'">
          <ds-count
              :chart="chart.chart"
              :icon="chart.icon"
              :title="chart.title"
              :keymap="chart.keymap"
              :endpoint="chart.endpoint"
              :name="chart.name"
              :query="chart.query"
              :unit="chart.unit"
          />
        </ds-grace-cell>
        <ds-grace-cell v-if="chart.type === 'Chart'">
          <ds-chart
              :option="chart.chartOption"
              :mode="chart.mode"
              :title="chart.title"
              :keymap="chart.keymap"
              :endpoint="chart.endpoint"
              :height="chart.height"
              :query="chart.query"
          />
        </ds-grace-cell>
        <ds-grace-cell v-if="chart.type === 'Table'">
          <ds-scroll-table
            :label="chart.label"
            :height="chart.height"
            :column="chart.column"
            :endpoint="chart.endpoint"
            :query="chart.query"
          />
        </ds-grace-cell>
      </template>
    </ds-grid-layout>
  </div>
</template>

<script lang="ts">
import {defineComponent, inject} from 'vue'
import DsGridLayout from './DsGridLayout.vue';
import DsChart from './DsChart.vue';
import DsTitle from './DsTitle.vue';
import DsCount from './DsCount.vue';
import DsGraceCell from "./DsGraceCell.vue";
import DsScrollTable from "./DsScrollTable.vue";

export default defineComponent({
  name: 'DsBody',
  components: {DsScrollTable, DsGraceCell, DsCount, DsTitle, DsGridLayout, DsChart},
  setup() {
    const {layout, charts, theme} = inject('Config')
    return {
      layout,
      charts,
      theme,
    }
  }
})
</script>

<style lang="scss" scoped></style>
